<template>
  <div class="account-setting" v-if="userInfo">
    <div class="top">
      <div class="top-content">
        <div class="user-info" @click="changeInfo">
          <img :src="userInfo.head_image" alt="" class="avatar" v-if="userInfo.head_image"/>
          <img src="@/assets/image/default-avatar.jpeg" alt="" class="avatar" v-else/>

          <div class="user-info-center">
            <div class="user-name">{{ userInfo.username }}</div>
            <div class="company-name">{{ userInfo.company }}</div>
          </div>
          <div class="user-type" v-if="role !== 'CUSTOMER'">{{ rolesDict[role]}}</div>
        </div>
        <div class="view-count-wrapper">
          <p>获得浏览量：<span class="blue-text">{{ userInfo.sum_view }}</span></p>
          <p>发布视频：<span class="blue-text">{{ userInfo.sum_push }}</span></p>
        </div>
      </div>
    </div>
    <!-- 红色的提示 -->
    <!-- <div class="tip" v-if="role !== 'HQ'">
      <p class="tip-left">您还有15个常用素材未上传</p>
      <p class="tip-right" @click="jump('/commonmaterial')">去上传</p>
    </div> -->
    <!-- cells -->
    <div class="content">
      <div class="line" @click="jump('/materialPackManage')" v-if="role !== 'CHILD'">
        <span class="label">素材包管理</span>
        <div class="line-right">
          <span class="gray-text a">{{ userInfo.sum_material_package || 0 }}个</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line" @click="jump('/tiaociManage')" v-if="role === 'CUSTOMER'">
        <span class="label">条次管理</span>
        <div class="line-right">
          <span class="gray-text a">{{ stripCount }}</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line" @click="jump('/myTeam')" v-if="role === 'MERCHANT' || role === 'HQ' || role === 'OPERATE'">
        <span class="label">我的团队</span>
        <div class="wait-auth" v-if="detail.has_wait_auth">待审核</div>
        <div class="line-right" >
          <span class="gray-text a">{{ detail.sum_member }}人</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line" @click="jump('/accountAuth')" v-if="role !== 'HQ'">
        <span class="label">平台账号授权</span>
        <div class="line-right">
          <span class="gray-text a" v-if="userInfo.is_binding">已绑定</span>
          <span class="red-text a" v-else>未绑定</span>

          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line" @click="jump('/topicTextManage')">
        <span class="label">话题词管理</span>
        <div class="line-right">
          <span class="gray-text a" v-if="hasTopicConfig">已设置</span>
          <span class="red-text a" v-else>未设置</span>

          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line" @click="jump('/publishConfig')" v-if="role !== 'HQ'">
        <span class="label">托管发布</span>
        <div class="line-right">
          <span class="gray-text a" v-if="userInfo.publish_auto === 'ON'">已开启</span>
          <span class="red-text a" v-else>未开启</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line" @click="jump('/accountCommonSetting')" v-if="role === 'MERCHANT' || role === 'MEMBER'">
        <span class="label">账号常用设置</span>
        <div class="line-right">
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line" @click="jump('/individuationConfig')" v-if="role === 'CHILD' || role === 'OPERATE' || role === 'CUSTOMER'">
        <span class="label">个性化参数</span>
        <div class="line-right">
          <span class="gray-text a" :class="{'red-text': !gexing}">{{ gexing ? '已设置' : '未设置'}}</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div class="line" @click="toChangeMobile('/changeMobile')">
        <span class="label">更换手机号</span>
        <div class="line-right">
          <span class="gray-text a">{{ userInfo.mobile }}</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
    </div>

    <div class="exit-cell" @click="logout">
      <span>退出登录</span>
    </div>
  </div>
</template>

<script>
import { getUserInfo, findFilmingParticipation, getStripCount, listTopicWords } from '@/api/account'
import { rolesDict } from '@/utils/dict'
import { selfHomepage, getTeamInfo } from '@/api/selfuse'
import { getOssDomain } from '@/api/oss'
import { Toast } from 'vant'
import { mapGetters } from 'vuex'
export default {
  layout: 'default',
  data () {
    return {
      hasTopicConfig: false,
      rolesDict,
      authDict: {
        'ALL_AUTHORIZE': '全部授权',
        'PART_AUTHORIZE': '部分授权',
        'NOT_AUTHORIZE': '不授权'
      },
      userInfo: null,
      detail: {},
      oss_domain: '',
      gexing: false,
      stripCount: 0,
    }
  },
  computed: {
    ...mapGetters(['commonUrlPath']),
    role () {
      return this.$store.getters.role
    },
    account_id () {
      return this.$store.getters.account_id
    },
  },

  async asyncData ({ store, $api, app }) {
    const nowDate = Date.now()
    const { token, role, account_id} = store.getters
    const { domain } = await $api.getOssDomain()
    store.commit('auth/SetDomain', domain)
    let taskArr = []
    if (role === 'OPERATE' || role === 'CHILD') {
      taskArr.push($api.selfHomepage())
    } else {
      taskArr.push($api.getUserInfo({ account_id }))
    }
    // const teamInfo = await $api.getTeamInfo()
    taskArr.push($api.getTeamInfo())
    // const aa = await $api.findFilmingParticipation()
    taskArr.push($api.findFilmingParticipation())
    // const topicInfo = await $api.listTopicWords()
    taskArr.push($api.listTopicWords())
    if (role === 'CUSTOMER') {
      taskArr.push($api.getStripCount())
    }
    const res = await Promise.all(taskArr)
    let userInfo = res[0]
    userInfo.head_image = `${domain}/${userInfo.head_image}`
    let teamInfo = res[1]
    let aa = res[2]
    let topicInfo = res[3]
    let StripCount = res[4] || 0
    console.log('用时：', Date.now() - nowDate)
    return {
      hasTopicConfig: !!topicInfo.length,
      gexing: (aa.font_key && aa.voice_key),
      userInfo,
      detail: teamInfo,
      oss_domain: domain,
      stripCount: StripCount && StripCount.remain_strip
    }
  },
  // 设置页面的 header
  head () {
    return {
      title: '个人中心'
    }
  },
  beforeMount () {
    console.log('page before mount')
  },
  async mounted () {
    console.log('page mounted')
    // if (!sessionStorage.getItem('oss_domain')) {
    //   const res = await getOssDomain()
    //   sessionStorage.setItem('oss_domain', res.domain)
    //   this.oss_domain = res.domain
    // } else {
    //   this.oss_domain = sessionStorage.getItem('oss_domain')
    // }
    // this.getUserInfo()
    // this.getDetail()
    // this.getCanyudu()
    // this.getTopicConfig()
    // if (this.role === 'CUSTOMER') {
    //   getStripCount().then(res => {
    //     this.stripCount = res.remain_strip
    //   })
    // }
  },
  methods: {
    getTopicConfig() {
      listTopicWords().then(res => {
        if (res.length) this.hasTopicConfig = true
      })
    },
    logout () {
      Toast('已退出登录')
      setTimeout(() => {
        wx.miniProgram.navigateTo({
          url: '/pages/chat/chat?logout=1',
        })
      }, 1500)
    },
    getCanyudu () {
      findFilmingParticipation().then(res => {
        if (res.font_key && res.voice_key) {
          this.gexing = true
        }
      })
    },
    getDetail () {
      getTeamInfo().then(res => {
        this.detail = res
      })
    },
    toChangeMobile (path) {
      path = `${this.commonUrlPath}${path}`
      this.$router.push({
        path,
        query: {
          mobile: this.userInfo.mobile
        }
      })
    },
    changeInfo () {
      this.$router.push({
        path: `${this.commonUrlPath}/userDetail`,
        query: {
          username: this.userInfo.username,
          avatar: this.userInfo.head_image
        }
      })
    },
    // 获取账户信息
    getUserInfo () {
      const { account_id } = this
      if (this.role === 'OPERATE' || this.role === 'CHILD') {
        selfHomepage().then(res => {
          if (res.head_image) {
            res.head_image = `${this.oss_domain}/${res.head_image}`
          }
          this.userInfo = res
        })
      } else {
        getUserInfo({ account_id }).then(res => {
          if (res.head_image) {
            res.head_image = `${this.oss_domain}/${res.head_image}`
          }
          this.userInfo = res
        })
      }
    },
    jump (path) {
      path = `${this.commonUrlPath}${path}`
      this.$router.push({ path })
    }
  }
}
</script>

<style scoped>
.exit-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 89.87vw;
  height: 14.93vw;
  margin: 0 auto;
  border-radius: 2.13vw;
  background: #FFFFFF;
  box-sizing: border-box;
  /* border: 0.5px solid #E9E9E9; */
  /* box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06); */
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #F04F4F;
}
.wait-auth {
  position: absolute;
  left: 18.2vw;
  top: 5.87vw;
  width: 9.23vw;
  height: 4.27vw;
  line-height: 4.27vw;
  text-align: center;
  border-radius: 2.13vw;
  background: #E20000;
  font-family: 思源黑体;
  font-size: 2.13vw;
  font-weight: 500;
  color: #FFFFFF;
}
.tip {
  width: 89.6vw;
  height: 12.27vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 5.33vw;
  border-radius: 1.07vw;
  margin: 0 auto 3.2vw;
  font-family: Source Sans Pro;
  font-weight: 600;
  color: #FF0000;
  background: #FFF3F3;
}
.tip-left {
  font-size: 3.2vw;
}
.tip-right {
  font-size: 3.73vw;
}
.view-count-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 83.73vw;
  height: 16vw;
  box-sizing: border-box;
  padding: 0 3.2vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #666666;
  background: #F8F8FA;
}
.blue-text {
  font-family: Source Sans Pro;
  font-size: 6.4vw;
  font-weight: bold;
  line-height: 7.47vw;
  color: #0A67FF;
}
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.2vw;
}
.user-info-center {
  flex: 1;
}
.user-type {
  position: relative;
  top: -3vw;
  width: 12.27vw;
  text-align: center;
  height: 5.33vw;
  border-radius: 2.67vw;
  line-height: 5.33vw;
  background: #006EDD;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.avatar {
  width: 15.47vw;
  height: 15.47vw;
  border-radius: 50%;
  margin-right: 3.2vw;
}
.user-name {
  margin-bottom: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 4.8vw;
  font-weight: bold;
  line-height: 7.47vw;
  color: #3D3D3D;
}
.company-name {
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  color: #BDC6D9;
}
.top-content {
  box-sizing: border-box;
  padding: 3.2vw 3.2vw 0;
  width: 89.6vw;
  height: 41.6vw;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 2.13vw;
}
.top {
  box-sizing: border-box;
  padding-top: 7.47vw;
  height: 52.27vw;

  background: linear-gradient(180deg, #006EDD 0%, #009CEC 41%, #F8F8FA 100%);
}
.line-right {
  display: flex;
  align-items: center;
  height: 5.87vw;
}
.right-icon {
  width: 2vw;
  height: 2vw;
}
.account-setting {
  padding-bottom: 21.33vw;
}
.content {
  width: 89.6vw;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 2.13vw;
  margin-bottom: 2.13vw;
}
.line {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15.47vw;
  margin: 0 4vw;
  border-bottom: 1px solid #E6E6E6;
}
.line:last-of-type {
  border-bottom: none;
}
.label {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 500;
  color: #3D3D3D;
}
.red-text, .gray-text {
  margin-right: 1.6vw;
}
.text {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
}
.red-text {
  color: #EA0000!important;
}
.a {
  font-family: Source Han Sans CN;
  font-size: 3.73vw;
  font-weight: normal;
}
.gray-text {
  color: #999999;
}
</style>